<template>
  <div class="login-wapper">
    <!--<van-nav-bar title="登录" left-text="返回" left-arrow fixed @click-left="onClickLeft">-->
    <!--<van-icon name="arrow-left" slot="left"/>-->
    <!--&lt;!&ndash;<van-icon name="search" slot="right"/>&ndash;&gt;-->
    <!--</van-nav-bar>-->
    <div class="login">
      <div class="store_header">
        <div class="store_avatar">
          <img
            src="../../assets/images/avatar_default.png"
            alt="头像"
            width="100"
            height="100"
          />
        </div>
        <div class="store_name"></div>
      </div>
      <div class="login-content">
        <van-cell-group style="border-radius: 8px;">
          <van-field
            v-model="userInfo.userid"
            label="用户名"
            left-icon="contact"
            placeholder="请输入用户名"
          />
          <van-field
            v-model="userInfo.password"
            label="密码"
            left-icon="lock"
            type="password"
            placeholder="请输入密码"
            error-message=""
          />
        </van-cell-group>
      </div>

      <div class="button-div">
        <!--<van-button size="large" type="danger" :loading="isLogining" @click="loginSubmit">登录</van-button>-->
        <van-button type="info" style="width: 100%;" @click="loginSubmit" round
          >登录</van-button
        >
        <van-button type="info" style="width: 100%;" @click="upgradeApp" round
        >升级</van-button
        >
      </div>

      <!--<div class="text-desc text-center bottom_positon">技术支持: litemall</div>-->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { loginByUsername } from "@/api/login";

export default {
  name: "Login",
  components: {
    Toast
  },
  data() {
    return {
      account: "",
      password: "",
      visiblePass: false,
      isLogining: false,
      userInfo: {
        userid: this.account,
        password: this.password
      }
    };
  },
  methods: {
    onClickLeft() {},
    upgradeApp(){
      this.downloadApk('http://183.236.42.41:8090/downloadPad');
      // this.getNativeVersion();
      // plus.runtime.openURL('http://183.236.42.41:8090/download');
    },
    loginByUserInfo() {
      loginByUsername(this.userInfo).then(res => {
        if (res.status == 200) {
          Toast.success("登录成功");
          this.$store.logininfo = res.data;
          this.$router.push({
            path: "/home"
          });
        } else {
          Toast.fail("用户名或密码错误");
        }
      });
    },
    loginSubmit() {
      this.loginByUserInfo();
    },
    // 获取当前版本号
    getNativeVersion(){
      let that = this;
      plus.runtime.getProperty(plus.runtime.appid, function(inf){
        console.info(inf.version);
        that.nativeVersion = inf.version;
        that.checkUpdate(inf.version);
        localStorage.setItem("nativeVersion", inf.version);
      });
    },
// 检查更新
    checkUpdate(nativeVersion){
      let that = this;
      const checkUrl = "http://183.236.42.41:8090/download?date="+new Date();
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4) {
          if(xhr.status === 200){
            console.info(xhr.responseText);
            let responseObj = JSON.parse(xhr.responseText);
            let serverVersion = responseObj.version;
         //   if(responseObj.update === "yes" && nativeVersion < serverVersion){
              that.downloadApk(responseObj.url);
         //   }
          }
        }
      };
      xhr.open('GET',checkUrl);
      xhr.send();
    },
// 下载apk文件
    downloadApk(url){
      let that = this;
      plus.downloader.createDownload( url , {filename: "iwmsAppD/update/"}, function(d, status){
        console.info('下载状态：'+status)
        if ( status === 200 ) {
          // 安装apk资源包
          that.installFlag = true;
          that.path = d.filename;
          console.info(d.filename);
          this.installFlag = false;
          plus.runtime.openURL("http://183.236.42.41:8090/downloadPad");
          plus.nativeUI.showWaiting("安装更新");
           // plus.runtime.quit();
          // plus.runtime.install(this.path,{force:true},function(){
          //   plus.nativeUI.closeWaiting();
          //   plus.nativeUI.alert("更新完成！",function(){
          //     //  更新完成后重启应用
          //     plus.runtime.restart();
          //   });
          // },function(e){
          //   plus.nativeUI.closeWaiting();
          //   plus.nativeUI.toast("安装更新失败！");
          // });
        }
      }).start();
    },
// 安装apk
    installApk(){
      this.installFlag = false;
      plus.nativeUI.showWaiting("安装更新");
      plus.runtime.install(this.path,{},function(){
        plus.nativeUI.closeWaiting();
        plus.nativeUI.alert("更新完成！",function(){
          //  更新完成后重启应用
          plus.runtime.restart();
        });
      },function(e){
        plus.nativeUI.closeWaiting();
        plus.nativeUI.toast("安装更新失败！");
      });
    }
  }
};
</script>

<style scoped lang="scss">
/*@import '../../assets/scss/mixin';*/
.login-wapper {
  position: relative;
  /*background-color: #fff;*/
  /*top:46px;*/
  height: 100%;
  background: url("~@/assets/images/bg.png");
  background-size: 100% 100%;
  /*display: flex;*/
}

.login {
  position: relative;
  /*background-color: #fff;*/
  /*top: 46px;*/
  /*vertical-align: middle;*/
  top: 45%; /*偏移*/
  transform: translateY(-50%);
}

.login-content {
  margin: 20px;
  padding: 5px;
  background: #fff;
  border-radius: 8px;
}

.button-div {
  padding: 20px;
}

.store_header {
  text-align: center;
  padding: 30px 0;

  .store_avatar img {
    border-radius: 50%;
  }

  .store_name {
    padding-top: 5px;
    font-size: 16px;
  }
}
</style>
